<template>
  <d2-container :key="key" v-loading="containerLoading">
    <img v-if="imageFlag" :src="src" alt="" class="frame-image" @load="imageLoaded" />
    <iframe
      v-else
      class="d2-container-frame"
      :src="src"
      frameborder="0"
      @load="iframeLoaded"
    ></iframe>
  </d2-container>
</template>

<script>
import IsImage from "is-image";

export default {
  name: "",
  data() {
    return {
      key: Date.now(),
      imageFlag: false,
      containerLoading: true,
    };
  },
  computed: {
    src() {
      return this.$route.meta.src;
    },
  },
  watch: {
    $route(newVal) {
      this.containerLoading = true;
      const { name } = newVal;
      if (name.startsWith("iframe-")) {
        this.key = Date.now();
      }
    },
  },
  created() {
    this.imageFlag = IsImage(this.src);
  },
  methods: {
    imageLoaded() {
      this.containerLoading = false;
    },
    iframeLoaded() {
      this.containerLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.d2-container-frame {
  width: 100%;
  height: calc(100% - 4px);
}
.frame-image {
  width: 100%;
}
</style>
